<template>
  <div class="dark">
    <div class="online"></div>
    <div class="dark-item">
      <svg class="icon" aria-hidden="true" @click="switchThemes">
        <use :xlink:href="icon"></use>
      </svg>
    </div>
  </div>
</template>

<script setup>
import { useDark, useToggle } from "@vueuse/core";
import { useHomeStore } from "@/stores/home.js";
import {ref} from 'vue'
const store = useHomeStore();
const isDark = useDark();
const switchThemes = () => {
  const toggleDark = useToggle(isDark);
  store.theme = toggleDark();
  // console.log(store.theme);
  if(store.theme){
    icon.value = '#icon-ziyuan'
  }else{//icon-ziyuan
    icon.value = '#icon-yewan-qing'
  }
};
const icon = ref('#icon-yewan-qing')
</script>

<style lang="scss" scoped>
.dark {
  animation: swing1 3s infinite ease-in-out;
  transform-origin: 0 0;
  position: fixed;
  top: 0;
  left: 50px;
  .online {
    height: 100px;
    width: 0.5px;
    background-color: #ffffff6d;
  }
  .dark-item {
    cursor: pointer;
    margin-left:-15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #ffffff3b;
    .icon {
      width: 30px;
      height: 30px;
    }
  }

  @keyframes swing1 {
    0%,
    100% {
      transform: rotate(15deg);
    }
    50% {
      transform: rotate(-15deg);
    }
  }
}
</style>